const orderUrl = "https://ali.ikenway.net:18443/api/order/findAll";
const orderFinishUrl = "https://ali.ikenway.net:18443/api/order/finish";
const orderCancelUrl = "https://ali.ikenway.net:18443/api/order/toCancelled";

let orders = null;
let token = sessionStorage.getItem("token");

function getOrders() {
    fetch(orderUrl, {
        method: 'GET',
        headers: {
            'Authorization': token
        }
    }).then(r => {
        r.json().then(json => {
            orders = json.data;

            if (json.code !== 200) {
                document.getElementById("alert").innerHTML = `
                    <a>` + json.msg + `</a>
                `;
                document.getElementById("alert").hidden = false;
                return;
            }

            let innerHtml = "";

            for (let i = 0; i < json.data.length; i++) {
                let type = json.data[i].type === "DINE" ? "堂食" : "外卖";

                let status;
                switch (json.data[i].status) {
                    case "TOPAY":
                        status = "待支付";
                        break;
                    case "PAYED":
                        status = "已支付";
                        break;
                    case "CANCELING":
                        status = "取消中";
                        break;
                    case "CANCELLED":
                        status = "已取消";
                        break;
                    case "FINISHED":
                        status = "已完成";
                        break;
                }

                innerHtml += `
                    <tr>
                        <td>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="` + i + `">
                            </div>
                        </td>
                        <th scope="row">` + json.data[i].orderId + `</th>
                        <td>` + type + `</td>
                        <td>` + status + `</td>
                        <td>` + json.data[i].createTime + `</td>
                        <td>` + json.data[i].purchaseTime + `</td>
                        <td>
                            <button type="button" class="btn btn-info me-3 pt-sm-1 pb-sm-1 w-2" data-bs-toggle="modal"
                                    data-bs-target="#exampleModal" data-bs-index="` + i + `">查看详情
                            </button>
                            <button type="button" class="btn btn-primary me-3  pt-sm-1 pb-sm-1 w-2" onclick="orderFinish(` + i + `)">完成</button>
                            <button type="button" class="btn btn-danger  pt-sm-1 pb-sm-1 w-2" onclick="orderCancel(` + i + `)">取消</button>
                        </td> 
                    </tr>
                `;
            }

            document.getElementById("table-body").innerHTML = innerHtml;
        })
    })
}

function orderOpera() {
    if (document.getElementById("selector").selectedIndex === 0) {
        orderFinish();
    } else {
        orderCancel();
    }
}

function orderFinish(index = null) {
    let formCheck = document.querySelectorAll(".form-check-input");
    let data = null;

    if (index !== null) {
        data = {
            "orderIds": [orders[index].orderId]
        };
    } else  {
        let checked = [];
        for (let i = 0; i < formCheck.length; i++) {
            if (formCheck[i].checked) {
                checked.push(orders[formCheck[i].value].orderId);
            }
        }

        data = {
            "orderIds": checked
        }
    }

    fetch(orderFinishUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': token
        },
        body: JSON.stringify(data)
    }).then(res => {
        res.json().then(json => {
            alert(json.msg);
        })
    });
}

function orderCancel(index = null) {
    let formCheck = document.querySelectorAll(".form-check-input");
    let data = null;

    if (index !== null) {
        data = {
            "orderIds": [orders[index].orderId]
        };
    } else {
        let checked = [];
        for (let i = 0; i < formCheck.length; i++) {
            if (formCheck[i].checked) {
                checked.push(orders[formCheck[i].value].orderId);
            }
        }

        data = {
            "orderIds": checked
        }
    }

    fetch(orderCancelUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': token
        },
        body: JSON.stringify(data)
    }).then(res => {
        res.json().then(json => {
            alert(json.msg);
        })
    })

}

function initModal() {
    let exampleModal = document.getElementById('exampleModal');
    exampleModal.addEventListener('show.bs.modal', function (event) {

        let index = event.relatedTarget.getAttribute('data-bs-index');

        let accordion = document.getElementById("accordion");

        let innerHtml = "";
        for (let i = 0; i < orders[index].orderSubs.length; i++) {

            let scale = null;
            switch (orders[index].orderSubs[i].scale) {
                case "MEDIUM":
                    scale = "中杯";
                    break;
                case "LARGE":
                    scale = "大杯";
                    break;
            }

            let addtition = null;
            switch (orders[index].orderSubs[i].additions) {
                case "None":
                    addtition = "无";
                    break;
                case "PUDDING":
                    addtition = "布丁";
                    break;
                case "PEARL":
                    addtition = "珍珠";
                    break;
            }


            innerHtml += `
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="heading` + i + `">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapse` + i + `" aria-expanded="true" aria-controls="collapse` + i + `">
                                商品 #` + i + `
                            </button>
                        </h2>
                        <div id="collapse` + i + `" class="accordion-collapse collapse" aria-labelledby="heading` + i + `"
                             data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <ul class="list-group">
                                    <li class="list-group-item d-flex flex-row">
                                        <div class="w-50">
                                            商品名:
                                        </div>
                                        <div class="flex-grow-1">
                                            ` + orders[index].orderSubs[i].productName + `
                                        </div>
                                    </li>
                                    <li class="list-group-item d-flex flex-row">
                                        <div class="w-50">
                                            规格:
                                        </div>
                                        <div class="flex-grow-1">
                                             ` + scale + `
                                        </div>
                                    </li>
                                    <li class="list-group-item d-flex flex-row">
                                        <div class="w-50">
                                            加料:
                                        </div>
                                        <div class="flex-grow-1">
                                             ` + addtition + `
                                        </div>
                                    </li>
                                    <li class="list-group-item d-flex flex-row">
                                        <div class="w-50">
                                            实际价格:
                                        </div>
                                        <div class="flex-grow-1">
                                             ` + orders[index].orderSubs[i].actualPrice + `
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                   </div>
            `;
        }

        accordion.innerHTML = innerHtml;
    })

}

